<!--
 * @Author: ShallowInk
 * @Date: 2021-07-27 23:03:42
 * @Description: 实现添加用户生成的
 * @FilePath: \GoodsManagement\src\pages\components\AddUser.vue
-->
<template>
  <n-form :model="model" :rules="rules">
    <n-form-item path="userName" label="用户名">
      <n-input v-model:value="model.userName" :on-input="onChange"></n-input>
    </n-form-item>
    <n-form-item path="passWord" label="密码">
      <n-input v-model:value="model.password" :on-input="onChange"></n-input>
    </n-form-item>
    <n-form-item path="email" label="邮箱">
      <n-input v-model:value="model.email" :on-input="onChange"></n-input>
    </n-form-item>
    <n-form-item path="phone" label="手机">
      <n-input v-model:value="model.phone" :on-input="onChange"></n-input>
    </n-form-item>
  </n-form>
</template>
<script lang="ts">
import { ref } from "vue";
import { NForm, NFormItem, NInput } from "naive-ui";
import { useMessage } from 'naive-ui'
export default {
  components: {
    NForm,
    NFormItem,
    NInput,
  },
  setup() {
    const modelRef = ref({
      userName: null,
      passWord: null,
      email: null,
      phone: null,
    });
    /* 不可为空 */
    const message = useMessage()
    const rules = {
      userName: [
        {
            required: true,
            validator (rule, value) {
              if (!value) {
                return new Error('需要用户名')
              }
              return true
            },
            trigger: ['input', 'blur']
          },
      ],
      passWord: [
        {
            required: true,
          },
      ],
      email: [
        {
            required: true,
            validator (rule, value) {
              if (!value) {
                return new Error('需要邮箱')
              }
              return true
            },
            trigger: ['input', 'blur']
          },
      ],
      phone: [
        {
            required: true,
            validator (rule, value) {
              if (!value) {
                return new Error('需要手机号码')
              }
              return true
            },
            trigger: ['input', 'blur']
          },
      ],
    };

    /* 关于传值 */
    const onChange = () => {
      // console.log(JSON.stringify(modelRef.value))
      /* 每次 input 值改变传值给父组件 */
      // console.log(JSON.stringify(this.model))
      sessionStorage.setItem("userAddData", JSON.stringify(modelRef.value));
    };

    return {
      model: modelRef,
      onChange,
      rules,
    };
  },
};
</script>
<style lang=""></style>
